<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p5_ 溢出替换为省略号</title>
    <style>
        div {
            /* 设置背景颜色为黄色 */
            background-color: #FFFF00;
            /* 定义元素宽度为200像素 */
            width: 200px;
            /* 防止文本换行，确保文本在一行内显示 */
            white-space: nowrap;
            /* 当文本超出元素宽度时，隐藏超出部分 */
            overflow: hidden;
            /* 当文本超出元素宽度时，使用省略号表示被隐藏的文本 */
            text-overflow: ellipsis;

        }
    </style>
</head>
<body>
<div>
    lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consectetur
    lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid asperiores atque autem blanditiis consecteturd
</div>
</body>
</html>